<template>
    <Layout>
        <!-- 页面标题和操作栏 -->
        <div class="bg-white border-b border-neutral-medium/30 p-4 md:p-6">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                <div>
                    <h2 class="text-[clamp(1.25rem,3vw,1.75rem)] font-bold">争议处理流程</h2>
                    <p class="text-neutral text-sm mt-1">完整的争议案件处理流程和操作指南</p>
                </div>

                <div class="flex items-center space-x-3 mt-4 md:mt-0">
                    <button
                        class="flex items-center space-x-2 px-4 py-2 border border-neutral-medium/30 rounded-lg text-neutral hover:bg-neutral-light transition-colors">
                        <i class="fa fa-download"></i>
                        <span>流程导出</span>
                    </button>

                    <button
                        class="flex items-center space-x-2 px-4 py-2 border border-neutral-medium/30 rounded-lg text-neutral hover:bg-neutral-light transition-colors">
                        <i class="fa fa-print"></i>
                        <span>打印流程</span>
                    </button>
                </div>
            </div>
        </div>

        <!-- 流程概览 -->
        <ProcessOverview />

        <!-- 流程详情 -->
        <div class="flex-1 overflow-y-auto p-4 md:p-6 scrollbar-thin">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- 左侧：流程详情导航 -->
                <div class="lg:col-span-1 space-y-4">
                    <ProcessNavigation ref="navigationRef" />
                </div>

                <!-- 右侧：当前步骤详情 -->
                <div class="lg:col-span-2">
                    <ProcessStepDetail />
                </div>
            </div>
        </div>
    </Layout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Layout from '@/components/layout/Layout.vue'
import ProcessOverview from '@/components/process/ProcessOverview.vue'
import ProcessNavigation from '@/components/process/ProcessNavigation.vue'
import ProcessStepDetail from '@/components/process/ProcessStepDetail.vue'

const navigationRef = ref<InstanceType<typeof ProcessNavigation> | null>(null)
</script>
